<template>
    <div>
        <el-form label-width="auto" :inline="true">
            <el-form-item label="车牌号">
                <el-input v-model="pageParam.condition.licensePlate" placeholder="车牌号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="pageParam.condition.status" placeholder="车辆状态" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> 
            </el-form-item>                         
            <el-form-item label="进出场ID">
                    <el-input v-model="pageParam.condition.entryID" placeholder="进出场ID"></el-input>
            </el-form-item>
           
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="pageData.records" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="entryID" label="进出场ID"></el-table-column>
            <el-table-column prop="status" label="车辆状态"></el-table-column>
            <el-table-column prop="licensePlate" label="车牌号"></el-table-column>
            <el-table-column prop="entryTime" label="进场时间"></el-table-column>
            <el-table-column prop="exitTime" label="出场时间"></el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination v-model:current-page="pageData.current" v-model:page-size="pageData.size"
                :page-sizes="[2, 5, 10]" :size="pageData.size" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="pageData.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
// 从后端将分页数据获取到前端使用表格展示
import http from '@/utils/http'
import { ref, onMounted, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router';
let router = useRouter()
const options = [
  {
    value: '0',
    label: '0',
  },
  {
    value: '1',
    label: '1',
  }
]
// 分页参数
let pageParam = ref({
    pageNum: 1,
    pageSize: 10,
    condition: {
    }
})
let pageData = ref({})
//定义获取分页数据的函数
async function getPageData() {
    let resp = await http.post('/entryRecord/page', pageParam.value)
    pageData.value = resp.data
    console.log(pageData.value)
}
//组件加载时执行一次 获取分页数据
onBeforeMount(() => {
    getPageData()
})
function handleSizeChange(val) {
    pageParam.value.pageSize = val
    getPageData()
}
function handleCurrentChange(val) {
    pageParam.value.pageNum = val
    getPageData()
}
function handleSearch() {
    getPageData()
}
</script>

<style lang="css" scoped>
.condition {
    margin-bottom: 20px;
}
</style>